<script setup>
import {onMounted, shallowRef, watch} from "vue";
import SyncCard from "@/views/sync/SyncCard.vue";
import OneDrivePng from "@/assets/img/onedrive.png";
import {useRoute, useRouter} from "vue-router";
import {onedrive, serviceTitleMap} from "@/utils/constants";
import {config} from "@/store/modules/globals";

const route = useRoute();
const router = useRouter();

const page = shallowRef("");
const settingTitle = shallowRef("");
/**
 * 返回父路由
 */
function goBack()  {
  const currentRoute = router.currentRoute.value;
  const parentRoutePath = currentRoute.path.split('/').slice(0, -1).join('/');
  router.push(parentRoutePath);
}

/**
 * 获取子路由
 */
function getChildRoute() {
  // console.log('当前路由路径：', route.path);
  const childRoute = route.path.split('/')[2];
  page.value = childRoute ? childRoute.replace(/\//g, '') : "";
  settingTitle.value = serviceTitleMap[page.value];
}

onMounted(() => {
  getChildRoute();
});

watch(() => route.path, (newPath, oldPath) => {
  getChildRoute();
}, );
</script>

<template>
    <el-container v-if="page !== ''">
      <el-header class="sync-service-header">
        <el-page-header @back="goBack" title=" ">
          <template #content>
            <span class="text-large font-600 mr-3 setting-title-page-header"> {{ settingTitle }} 设置 </span>
          </template>
        </el-page-header>
      </el-header>
      <el-main class="sync-service-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  <div v-else>
    <sync-card
        :setting-route="onedrive"
        :name="serviceTitleMap[onedrive]"
        :sync-service-setting="config.syncServiceSettingMap.value.onedrive"
        :iconPath="OneDrivePng"
        description="OneDrive 是微软推出的允许用户在不同设备间同步文件、在线存储与共享文件，并与 Microsoft Office 紧密集成的云存储服务。"
    >
    </sync-card>
  </div>
</template>

<style scoped>
.sync-service-header {
  height: 40px;
  padding: 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.sync-service-header .el-page-header .el-page-header__left .el-page-header__icon {
  margin-right: 0!important;
}
.sync-service-header .el-page-header .el-page-header__left .el-divider--vertical {
  margin-left: 8px!important;
  margin-right: 8px!important;
}
.sync-service-main {
  padding: 0;
}
.setting-title-page-header {
  user-select: none;
}
.el-card {
  border-radius: 10px;
}
.el-card__header {
  padding-top: 10px!important;
  padding-bottom: 10px!important;
}
</style>